<script setup lang="ts">
import { PropType, ref, watch, onMounted } from 'vue'
import { useShopDetail } from '../../store/modules/shopdetail/index'

const emits = defineEmits(['changearea'])
const store = useShopDetail()
const $props = defineProps({
    areacode: {
        type: Array as PropType<string[]>,
        default() {
            return []
        },
    },
})
const pickRef = ref()
const areaStr = ref('')
watch(
    $props,
    () => {
        setTimeout(() => {
            const { areas, area, citys, city, provinces, province } = pickRef.value
            const str = `${provinces[province].name} ${citys[city].name} ${areas[area].name}`
            areaStr.value = str
            store.ShopDetail.push(areaStr.value)
        }, 0)
    },
    {
        immediate: true,
    },
)

//传入省市区的code 获取省市区的名称
const getAreaName = () => {
    const { areas, area, citys, city, provinces, province } = pickRef.value
    const str = `${provinces[province].name} ${citys[city].name} ${areas[area].name}`
    return str
}
onMounted(() => {
    const a = getAreaName()
    emits('changearea', a)
})
</script>

<template>
    <u-picker ref="pickRef" mode="region" :area-code="$props.areacode"></u-picker>
</template>

<style lang="scss" scoped></style>
